import Search from "@/components/public/Search";

import { View, Image, Text } from "@tarojs/components";
import icon_denj_one from "@/assets/image/icon_denj_one.jpg";
import ico_edt_two from "@/assets/image/ico_edt_two.svg";
import ico_del_two from "@/assets/image/ico_del_two.svg";
import ico_xinz from "@/assets/image/ico_xinz.svg";

import "./index.scss";
import { linkWithParams, preview } from "@/helper/utils";
import { routes } from "@/constants/routes";
import { useEffect, useState } from "react";
import {
  cooperationPlatformDelete,
  getPlatform,
} from "@/services/entities/all";
import { useDidShow, useReachBottom } from "@tarojs/taro";
import Taro from "@tarojs/taro";

const PlatformPage = () => {
  const [page, setPage] = useState(1);
  const [name, setName] = useState("");
  const [list, setList] = useState<any>([]);
  const getList = (pageNum) => {
    getPlatform({ currentPage: pageNum, pageSize: 10, name: name }).then(
      (res: any) => {
        console.log("res22.", res);
        if (pageNum === 1) {
          setList(res.records);
        } else {
          setList((old) => {
            return [...old, ...res.records];
          });
        }
      }
    );
  };

  useReachBottom(() => {
    if (page * 10 === list.length) {
      setPage((old) => old + 1);
    }
  });

  const deletePlatform = (id, index) => {
    Taro.showModal({
      title: "提示",
      content: "是否删除当前商家",
      success: (res) => {
        if (res.confirm) {
          cooperationPlatformDelete({ id: id }).then(() => {
            const tmp = [...list];
            tmp.splice(index, 1);
            setList(tmp);
          });
        }
      },
    });
  };

  useEffect(() => {
    getList(page);
  }, [page]);

  useDidShow(() => {
    setPage(1);
    getList(1);
  });
  return (
    <View className="platform-container bg-page pb-24 border-box">
      <View className="dis-flex bg-ffffff pd-16 border-box">
        <Search
          className="bg-ffffff width-full"
          onInput={(value) => setName(value)}
          right={
            <View
              className="bg-394B5D cl-white fs-28 lh-38 pd-tb-8 border-box pd-lr-38 br-28 mr-4"
              onClick={() => {
                setPage(1);
                getList(1);
              }}
            >
              查询
            </View>
          }
        />
      </View>
      <View className="flex-column align-center pd-lr-16 border-box">
        {list.map((item, index) => {
          return (
            <View
              key={index}
              className="width-full mt-16 flex-column align-center pt-50 pb-28 br-16 border-box bg-ffffff"
            >
              <View className="card-bg mt-38 br-16 flex-column pd-tb-60 border-box">
                <View className="tips-bg fs-24 lh-32 cl-white dis-flex justify-center pt-10 border-box text-overflow">
                  {item.name}
                </View>
                <View className="flex-center mt-60">
                  <View className="qr-code br-38 bg-ffffff flex-center">
                    <Image
                      src={item.imageUrl}
                      onClick={() => {
                        preview(item.imageUrl, [item.imageUrl]);
                      }}
                      className="qr-code-img br-38 bg-ffffff"
                    />
                  </View>
                </View>
                {/* <View className="flex-center mt-24 fs-28 lh-36 cl-9BB4E4">
                  二维码
                </View> */}
              </View>
              <View className="dis-flex align-center justify-evenly mt-32 width-full border-top  pt-30 border-box">
                <View
                  className="dis-flex align-center"
                  onClick={() => {
                    linkWithParams(routes.ROUTES_COOPERATION_ADD_PLATFORM, {
                      type: 2,
                      id: item.id,
                    });
                  }}
                >
                  <Image src={ico_edt_two} className="img-36" />
                  <Text className="fs-24 lh-34 cl-black ml-8">编辑</Text>
                </View>
                <View
                  className="dis-flex align-center"
                  onClick={() => {
                    deletePlatform(item.id, index);
                  }}
                >
                  <Image src={ico_del_two} className="img-36" />
                  <Text className="fs-24 lh-34 cl-E14848 ml-8">删除</Text>
                </View>
              </View>
            </View>
          );
        })}
        <View className="bottom flex-center bg-ffffff">
          <View
            className="dis-flex align-center"
            onClick={() => {
              linkWithParams(routes.ROUTES_COOPERATION_ADD_PLATFORM, {
                type: 1,
              });
            }}
          >
            <Image src={ico_xinz} className="handle-btn" />
            <Text className="ml-12 fs-28 lh-38 cl-black">新增</Text>
          </View>
        </View>
      </View>
    </View>
  );
};

export default PlatformPage;
